<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { checkUsername, forgetPassword } from '../api/user'

const loader = ref(false)

onMounted(() => {
  loader.value = false
})

const checkUsernameForm = reactive({
  username: '',
  email: ''
})

const modifyPasswordForm = reactive({
  password: '',
  confirmPwd: ''
})

const handleCheck = () => {
  loader.value = true
  checkUsername(checkUsernameForm.username, checkUsernameForm.email).then((res) => {
    if (res.code === 200) {
      ElMessage.success(res.msg)
      document.getElementById('checkUsernameForm')!.style.display = 'none'
      document.getElementById('modifyPasswordForm')!.style.display = 'block'
      loader.value = false
    }
  })
  loader.value = false
}

const handleModify = () => {
  loader.value = true
  if (!modifyPasswordForm.password || !modifyPasswordForm.confirmPwd) {
    ElMessage.error('请输入表单内容')
    loader.value = false
    return
  }

  if (modifyPasswordForm.password !== modifyPasswordForm.confirmPwd) {
    ElMessage.error('两个密码不一样')
    loader.value = false
    return
  }

  forgetPassword(checkUsernameForm.username, modifyPasswordForm.password).then((res) => {
    if (res.code === 200) {
      ElMessage.success(res.msg)
      checkUsernameForm.username = ''
      checkUsernameForm.email = ''
      modifyPasswordForm.password = ''
      modifyPasswordForm.confirmPwd = ''
      document.getElementById('checkUsernameForm')!.style.display = 'block'
      document.getElementById('modifyPasswordForm')!.style.display = 'none'
      loader.value = false
    }
  })
  loader.value = false
}
</script>

<template>
  <!-- 操作按钮 -->
  <opt-component has-back back-path="/" />

  <div v-loading="loader">
    <div
      class="font-sans text-3xl subpixel-antialiased font-bold flex justify-center justify-items-center gap-2 hover:cursor-default mt-20 mb-20"
    >
      忘 记 密 码
    </div>

    <form id="checkUsernameForm" class="ml-10 mr-10">
      <div class="grid grid-cols-1 gap-x-6 gap-y-12">
        <div class="relative">
          <label for="username" class="absolute -top-7 left-0 text-gray-500">用户名</label>
          <input
            id="username"
            v-model="checkUsernameForm.username"
            type="text"
            name="username"
            placeholder="请输入忘记密码的用户名"
            class="placeholder:text-slate-400 placeholder:text-sm block bg-white w-full border border-slate-300 rounded-md py-2 pl-5 pr-5 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1"
          />
        </div>
        <div class="relative">
          <label for="email" class="absolute -top-7 left-0 text-gray-500">电子邮箱</label>
          <input
            id="email"
            v-model="checkUsernameForm.email"
            type="text"
            name="email"
            placeholder="请输入忘记密码的邮箱"
            class="placeholder:text-slate-400 placeholder:text-sm block bg-white w-full border border-slate-300 rounded-md py-2 pl-5 pr-5 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1"
          />
        </div>
        <button
          type="button"
          class="h-9 w-full rounded-md text-white text-xl bg-sky-500 hover:bg-sky-400 shadow-lg outline-none"
          @click="handleCheck"
        >
          查&nbsp;询
        </button>
      </div>
    </form>

    <form id="modifyPasswordForm" class="ml-10 mr-10" style="display: none">
      <div class="grid grid-cols-1 gap-x-6 gap-y-12">
        <div class="relative">
          <label for="password" class="absolute -top-7 left-0 text-gray-500">密码</label>
          <input
            id="password"
            v-model="modifyPasswordForm.password"
            type="password"
            name="password"
            placeholder="至少一个大写字母、一个数字，6-15个字符"
            class="placeholder:text-slate-400 placeholder:text-sm block bg-white w-full border border-slate-300 rounded-md py-2 pl-5 pr-5 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1"
          />
        </div>
        <div class="relative">
          <label for="confirmPassword" class="absolute -top-7 left-0 text-gray-500">确认密码</label>
          <input
            id="confirmPassword"
            v-model="modifyPasswordForm.confirmPwd"
            type="password"
            name="confirmPassword"
            placeholder="请确认密码"
            class="placeholder:text-slate-400 placeholder:text-sm block bg-white w-full border border-slate-300 rounded-md py-2 pl-5 pr-5 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1"
          />
        </div>
        <button
          type="button"
          class="h-9 w-full rounded-md text-white text-xl bg-sky-500 hover:bg-sky-400 shadow-lg outline-none"
          @click="handleModify"
        >
          修&nbsp;改
        </button>
      </div>
    </form>
  </div>
</template>

<style scoped></style>
